<template>
  <div class="home">
	  <van-skeleton class="van-skeleton" title  :row="20" :loading="loading">
		  <van-panel v-for="(i,k) in List" :key="k" :title="i.title" :desc="i.desc" :status="i.status">
			<div class="h-cont">
				<p>{{i.text}}</p>
			</div>
			<template #footer>
			  <van-button size="small" to='/component' type="danger">查看示例</van-button>
			</template>
		  </van-panel>
	  </van-skeleton>
  </div>
</template>
<script>
	import mixin from '@/mixin/mixin'; //这里引入minxin
    import { Toast  } from 'vant';
	export default {
		mixins:[mixin],
		data(){
			return{
                List:[{
					title:'组件功能扩展',
					status:'项目实战',
					desc:'VUE Component',
					text:'slot插槽－mixin混入－VUE.extends－HOC高阶组件',
				}]
			}
		},
		mounted() {
			setTimeout(()=>{
				this.endSkeleton();
			},1000)
		},
        methods:{
        }
	}
</script>
<style lang="scss">
    .home{
        padding:10px;
    }
    .van-panel__footer{
        text-align: right;
    }
    .van-panel__content {
        padding: 20px;
    }
    .h-cont p{
        font-size:16px;
		line-height:24px;
    }
</style>
